﻿<!DOCTYPE html>
<!-- 网站的语言 是中文 -->
<html lang="zh-CN">

<head>
        <!-- 编码格式是 utf-8 -->
        <meta charset="utf-8">
        <!-- 使用 最新式 ie 内核渲染 
    国内某些 所谓的 双核浏览器 或者是 直接 使用webkit去渲染
    -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口属性
    没有设置 禁用 用户缩放, 如果有需求可以添加
     -->
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>微金所demo</title>
        <!-- Bootstrap -->
        <link href="lib/css/bootstrap.min.css" rel="stylesheet">
        <!-- 
    media queries 媒体查询
 -->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!-- hack写法 当lt less than 小于 ie9的时候  -->
        <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script> 
        <script src="lib/js/respond.js"></script>
    <![endif]-->
        <!-- 导入自己的css -->
        <!-- 导入一个 base即可  base中 定义的是 我们的 字体图标-->
        <link rel="stylesheet" type="text/css" href="css/base.css">
        <!--  里面添加了 我们自定义的 导航栏 样式 -->
        <link rel="stylesheet" type="text/css" href="css/wjs.css">
</head>

<body>
        <!-- 顶部的 通栏 -->
        <div class="header hidden-md hidden-sm  hidden-xs ">
                <!-- 通栏的 栅格 -->
                <div class="container-fluid">
                        <div class="row">
                                <!-- 第一个单元格 -->
                                <div class="col-md-2 first">
                                        <a href="javascript:void(0)" class=''><span class='glyphicon glyphicon-phone'></span>手机微金所<span class='glyphicon glyphicon-menu-down'></span>
                        <img src="images/code.jpg" alt="">
                          </a>
                                </div>
                                <!-- 第二个单元格 -->
                                <div class="col-md-5 second">
                                        <a href='#' class='glyphicon glyphicon-phone-alt'>4006-89-4006（服务时间：9:00-21:00)</a>
                                </div>
                                <!-- 第三个单元格 -->
                                <div class="col-md-2 third">
                                        <a href="#">常见问题</a>
                                        <a href="#">财富登陆</a>
                                </div>
                                <div class="col-md-3 fourth">
                                        <a href="" class='btn btn-danger btn-xs'>免费注册</a>
                                        <a href="" class='login'>
                            登陆
                        </a>
                                </div>
                        </div>
                </div>
        </div>
        <!-- 下方的 导航栏 -->
        <nav class="navbar wjs-default">
                <div class="container">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="#">
                                        <span class='wjsfont wjsfont-logo'></span>
                                        <span class='wjsfont wjsfont-word'></span>
                                </a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                        <li class="active"><a href="#">我要投资<span class="sr-only">(current)</span></a></li>
                                        <li><a href="#">我要借贷</a></li>
                                        <li><a href="#">平台介绍</a></li>
                                        <li><a href="#">新手专区</a></li>
                                        <li><a href="#">最新动态</a></li>
                                        <li><a href="#">微平台</a></li>
                                </ul>
                                <ul class="nav navbar-nav navbar-right hidden-sm">
                                        <li><a href="#">个人中心</a></li>
                                </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
        </nav>
        <!-- 轮播图 -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                        <div class="item active">
                                <a href="#" class='move-image img01 hidden-xs'></a>
                                <a href="#" class='hidden-sm hidden-md hidden-lg'>
                                        <img src="images/slide_01_640x340.jpg" alt="">
                                </a>
                        </div>
                        <div class="item">
                                <!-- 两套方案  -->
                                <a href="#" class='move-image img02 hidden-xs'></a>
                                <a href="#" class='hidden-sm hidden-md hidden-lg'>
                                        <img src="images/slide_02_640x340.jpg" alt="">
                                </a>
                        </div>
                        <div class="item">
                                <a href="#" class='move-image img03 hidden-xs'></a>
                                <a href="#" class='hidden-sm hidden-md hidden-lg'>
                                        <img src="images/slide_03_640x340.jpg" alt="">
                                </a>
                        </div>
                        <div class="item">
                                <a href="#" class='move-image img04 hidden-xs'></a>
                                <a href="#" class='hidden-sm hidden-md hidden-lg'>
                                        <img src="images/slide_04_640x340.jpg" alt="">
                                </a>
                        </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                </a>
        </div>
        <!-- 微金所 信息 -->
        <div class='info'>
                <div class="container">
                        <div class="row">
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-e901'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-e905'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-e904'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-e903'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-e902'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                                <div class="col-md-4 col-sm-6 hidden-xs item">
                                        <a href='#'>
                                                <div class="media">
                                                        <div class="media-left">
                                                                <span class='wjsfont wjsfont-name'></span>
                                                        </div>
                                                        <div class="media-body">
                                                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                                                        </div>
                                                </div>
                                        </a>
                                </div>
                        </div>
                </div>
        </div>
        <!-- 微金所 的预约信息 -->
        <div class="book">
                <div class='container'>
                        <div class="pull-left">
                                <span class='glyphicon glyphicon-time'></span>现在有 273 人在排队，累计预约交易成功 7571 次。 什么是预约投标？
                                <a href="#" class='bookNow'>立即预约</a>
                        </div>
                        <div class="pull-right hidden-xs">
                                <a href="#" class='movie'>
                                        <span class='glyphicon glyphicon-camera'></span> 微金所企业宣传片
                                </a>
                        </div>
                </div>
        </div>
        <!-- 下方的产品信息 -->
        <div class='wjs_products'>
                <!-- Nav tabs  导航的 部分-->
                <ul class="nav  wjs-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#product_01" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a></li>
                        <li role="presentation"><a href="#product_02" aria-controls="profile" role="tab" data-toggle="tab">微投资</a></li>
                        <li role="presentation"><a href="#product_03" aria-controls="messages" role="tab" data-toggle="tab">微投资</a></li>
                        <li role="presentation"><a href="#product_04" aria-controls="settings" role="tab" data-toggle="tab">微投资</a></li>
                        <li role="presentation"><a href="#product_05" aria-controls="settings" role="tab" data-toggle="tab">微投资</a></li>
                </ul>
                <!-- Tab panes  内容区块-->
                <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="product_01">
                                <!--  容器 class的选择
                                    固定宽度  container
                                    会跟着 缩放 container-fluid
                          -->
                                <div class="container-fluid">
                                        <div class="row items">
                                                <!-- 第一个盒子 -->
                                                <div class="col-md-4 col-sm-6 col-xs-12 item">
                                                        <a href="#" class='product_box active wjsfont wjsfont-e915'>
                                                                <div class='box_right'>
                                                                        <p>8<span>%</span></p>
                                                                        <p>年利率</p>
                                                                </div>
                                                                <!-- 排位靠前的 标签 先渲染 -->
                                                                <!-- 左边的 盒子 -->
                                                                <div class='box_left'>
                                                                        <h3>新手体验标1002期</h3>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>起投金额</p>
                                                                                <p>0.01万</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标人数</p>
                                                                                <p>22</p>
                                                                        </div>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>借款期限</p>
                                                                                <p>10天</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标金额</p>
                                                                                <p>2000</p>
                                                                        </div>
                                                                </div>
                                                        </a>
                                                </div>
                                                <!-- 第二个盒子 -->
                                                <div class="col-md-4 col-sm-6 col-xs-12 item">
                                                        <a href="#" class='product_box  '>
                                                                <div class='box_right'>
                                                                        <div class='popinfo_box'>
                                                                                <span data-toggle="tooltip" data-placement="top" title="我还是个宝宝">宝</span>
                                                                                <span data-toggle="tooltip" data-placement="top" title="北京欢迎你">北</span>
                                                                        </div>
                                                                        <p class='percent'>8<span>%</span></p>
                                                                        <p>年利率</p>
                                                                </div>
                                                                <!-- 排位靠前的 标签 先渲染 -->
                                                                <!-- 左边的 盒子 -->
                                                                <div class='box_left'>
                                                                        <h3>新手体验标1002期</h3>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>起投金额</p>
                                                                                <p>0.01万</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标人数</p>
                                                                                <p>22</p>
                                                                        </div>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>借款期限</p>
                                                                                <p>10天</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标金额</p>
                                                                                <div class="progress">
                                                                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                                                                                <span class="sr-only">60% Complete</span>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </a>
                                                </div>
                                                <div class="col-md-4 col-sm-6 col-xs-12 item">
                                                        <a href="#" class='product_box  '>
                                                                <div class='box_right'>
                                                                        <p>8<span>%</span></p>
                                                                        <p>年利率</p>
                                                                </div>
                                                                <!-- 排位靠前的 标签 先渲染 -->
                                                                <!-- 左边的 盒子 -->
                                                                <div class='box_left'>
                                                                        <h3>新手体验标1002期</h3>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>起投金额</p>
                                                                                <p>0.01万</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标人数</p>
                                                                                <p>22</p>
                                                                        </div>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>借款期限</p>
                                                                                <p>10天</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标金额</p>
                                                                                <p>2000</p>
                                                                        </div>
                                                                </div>
                                                        </a>
                                                </div>
                                                <div class="col-md-4 col-sm-6 col-xs-12 item">
                                                        <a href="#" class='product_box  '>
                                                                <div class='box_right'>
                                                                        <p>8<span>%</span></p>
                                                                        <p>年利率</p>
                                                                </div>
                                                                <!-- 排位靠前的 标签 先渲染 -->
                                                                <!-- 左边的 盒子 -->
                                                                <div class='box_left'>
                                                                        <h3>新手体验标1002期</h3>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>起投金额</p>
                                                                                <p>0.01万</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标人数</p>
                                                                                <p>22</p>
                                                                        </div>
                                                                        <div class="col-xs-6 left_col">
                                                                                <p>借款期限</p>
                                                                                <p>10天</p>
                                                                        </div>
                                                                        <div class="col-xs-6 right_col">
                                                                                <p>已投标金额</p>
                                                                                <p>2000</p>
                                                                        </div>
                                                                </div>
                                                        </a>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="product_02">2</div>
                        <div role="tabpanel" class="tab-pane" id="product_03">3</div>
                        <div role="tabpanel" class="tab-pane" id="product_04">4</div>
                        <div role="tabpanel" class="tab-pane" id="product_05">5</div>
                </div>
        </div>
        <!--  新闻部分 -->
        <div class="wjs_news">
                <div class="container">
                        <div class="row">
                                <div class='col-md-2 col-md-offset-2'>
                                        <h3>全部新闻</h3>
                                </div>
                                <!-- 栅格2 放置的是 tab标签页 标签栏 -->
                                <div class='col-md-2'>
                                        <div class='tab_line hidden-xs'></div>
                                        <ul class="nav wjs-news-tabs" role="tablist">
                                                <li role="presentation" class="active">
                                                        <a href="#new01" aria-controls="home" role="tab" data-toggle="tab" class='wjsfont wjsfont-new01'></a>
                                                </li>
                                                <li role="presentation">
                                                        <a class='wjsfont wjsfont-new02' href="#new02" aria-controls="profile" role="tab" data-toggle="tab"></a>
                                                </li>
                                                <li role="presentation">
                                                        <a class='wjsfont wjsfont-new03' href="#new03" aria-controls="messages" role="tab" data-toggle="tab"></a>
                                                </li>
                                                <li role="presentation">
                                                        <a class='wjsfont wjsfont-new04' href="#new04" aria-controls="settings" role="tab" data-toggle="tab"></a>
                                                </li>
                                        </ul>
                                </div>
                                <!-- 栅格3 放置的是 tab标签页的 内容 -->
                                <div class='col-md-6'>
                                        <div class="tab-content">
                                                <div role="tabpanel" class="tab-pane active" id="new01">
                                                        <ul>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span> 【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                                <li><a href="#"><span class='hidden-xs'>2016-9-19</span>【微还款】一周还款公告2016年1月18日-1月24日</a></li>
                                                        </ul>
                                                </div>
                                                <div role="tabpanel" class="tab-pane" id="new02">2</div>
                                                <div role="tabpanel" class="tab-pane" id="new03">3</div>
                                                <div role="tabpanel" class="tab-pane" id="new04">4</div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>

        <!-- 定义合作 单位的布局效果 -->
        <div class="friend_company">
            <div class="container">
            <h3>跟这些单位都有合作哦</h3>
                <ul>
                    <li><a href="#" class="wjsfont wjsfont-partner01"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner02"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner03"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner04"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner05"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner06"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner07"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner08"></a></li>
                    <li><a href="#" class="wjsfont wjsfont-partner09"></a></li>
                </ul>
            </div>
        </div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是基于jq的-->
<script src="lib/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed 导入boot的一些js -->
<script src="lib/js/bootstrap.min.js"></script>
<!-- 导入 我们自定义的 js代码 -->
<script type="text/javascript" src='js/wjs.js'></script>
